<template>
	<div>
		<!-- 顶部：分类 搜索 增加 导出 -->
		<div class="filter-container">
			<el-select v-model="query.categoryId" placeholder="选择分类" @change="handleSearch">
				<el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
			</el-select>

			<el-input v-model="query.keyword" placeholder="输入搜索" style="width: 140px" @keyup.enter.native="handleSearch"></el-input>
			<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
			<el-button type="primary" style="margin-left: 10px;" :icon="CirclePlus" @click="handleAdd">增加</el-button>
			<el-button :loading="exportLoading" type="primary" :icon="Switch" @click="handleExport">导出</el-button>
		</div>

		<!-- 数据列表 编辑 删除 -->
		<div class="list-container">
			<el-table :data="dataList" border fit highlight-current-row>
				<el-table-column label="ID" prop="id" width="60" align="center"></el-table-column>
				<el-table-column label="商品名" prop="name" width="240"></el-table-column>
				<!-- <el-table-column label="商品规格" prop="spec"></el-table-column> -->
				<el-table-column label="单价" width="80">
					<template #default="scope">
						￥{{ scope.row.price }}
					</template>
				</el-table-column>
				<el-table-column label="库存数" prop="count" align="right" width="80"></el-table-column>

				<el-table-column label="图片" align="center" width="80">
					<template #default="{row}">
						<el-image :src="$fullUrl(row.img)" :preview-src-list="[$fullUrl(row.img)]" preview-teleported></el-image>
					</template>
				</el-table-column>

				<el-table-column label="上架时间" prop="createTime" align="center" width="160"></el-table-column>
				<el-table-column label="状态" prop="status" align="center" width="80">
					<template #default="{ row }">
						{{ row.status == 1 ? '在售' : '下架' }}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="240" align="center">
					<template #default="{row}">
						<el-button link type="primary" :icon="Edit" @click="handleUpdate(row.id)">编辑</el-button>
						<el-button link type="danger" :icon="Delete" @click="handleDelete(row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="totalCount"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<goods-edit v-if="editDialogVisible" ref="editDialogRef" @refreshDataList="loadDataList" :categoryId="query.categoryId" :categoryList="categoryList"></goods-edit>
	</div>
</template>

<script setup>
import * as GoodsAPI from '@/api/goods.js';
import * as CategoryAPI from '@/api/category.js';
import GoodsEdit from './components/GoodsEdit.vue';
import dayjs from 'dayjs';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {Search,CirclePlus,Switch, Edit, Delete } from '@element-plus/icons-vue';
const dataList = ref([]); //列表数据
const categoryList = ref([]); //分类选项数据
const query = reactive({
	categoryId: 0,
	keyword: '',
	pageIndex: 1,
	pageSize: 10
}); // 分页查询参数
const totalCount = ref(0); //总记录数
const exportLoading = ref(false); //导出,还没实现
const editDialogVisible = ref(false); //编辑框是否显示

onMounted(async () => {
	// 获取分类信息数据，初始分类选择组件数据
	let result = await CategoryAPI.getList();
	categoryList.value = result.data; //返回数据结构参见API文档
	if (categoryList.value.length > 0) {
		query.categoryId = categoryList.value[0].id;
		loadDataList(); // 初始列表数据
	}
});

// 获取列表数据
const loadDataList = async () => {
	let result = await GoodsAPI.getPage(query);
	dataList.value = result.data.list; //返回数据结构参见API文档
	totalCount.value = result.data.totalCount;
	// 转换日期格式
	dataList.value.forEach(item => {
		item.createTime = dayjs(item.createTime).format('YYYY-MM-DD');
	});
};

// 触发搜索按钮
const handleSearch = () => {
	query.pasgeIndex = 1;
	loadDataList();
};

const editDialogRef = ref(null);
// 增加记录
const handleAdd = async () => {
	editDialogVisible.value = true;
	await nextTick();
	editDialogRef.value.init(0); //id==0表示新增
};
// 触发导出按钮
const handleExport = () => {
	ELMessage('导出，待完成...');
};

// 删除操作
const handleDelete = (id) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then( async () => {
		// 选择了确认，则删除后端数据库中的记录
		await GoodsAPI.deleteById(id);
		loadDataList(); //同步列表中的记录
		ElMessage.success('删除成功');
	});
};

// 编辑操作，id为编辑记录的ID
const handleUpdate = async (id) => {
	editDialogVisible.value = true;
	await nextTick();
	editDialogRef.value.init(id);
};

// 分页导航=======================================
const handlePageChange = (val) => {
	query.pageIndex = val;
	loadDataList();
};
</script>

<style scoped></style>
